Integrasjon av JavaScript-utviklingsverktøy: Utvikling av VS Code-utvidelser

Visual Studio Code (VS Code) har blitt en dominerende kraft i verden av koderedigeringsverktøy, elsket av utviklere over hele kloden for sin fleksibilitet, rike økosystem av utvidelser og robuste funksjonssett. Et sentralt aspekt ved VS Codes kraft ligger i dets utvidbarhet, som lar utviklere skreddersy IDE-en til sine spesifikke behov og arbeidsflyter. Denne artikkelen gir en omfattende guide til integrasjon av JavaScript-utviklingsverktøy gjennom utvikling av VS Code-utvidelser, og dekker alt fra det grunnleggende til avanserte teknikker.

Hvorfor utvikle VS Code-utvidelser for JavaScript?

Å utvikle VS Code-utvidelser for JavaScript gir mange fordeler, som påvirker individuelle utviklere, team og det bredere JavaScript-fellesskapet.

• Økt produktivitet: Automatiser repeterende oppgaver, strømlinjeform arbeidsflyter og reduser manuell innsats, slik at utviklere kan fokusere på kjerne-logikk og kreativ problemløsning.
• Tilpasset kodemiljø: Skreddersy IDE-en til spesifikke prosjektkrav, kodestiler og personlige preferanser, og skap en mer komfortabel og effektiv utviklingsopplevelse.
• Forbedret kodekvalitet: Integrer lintere, formatterere og kodeanalyseverktøy direkte i redigeringsprogrammet, for å sikre kodekonsistens, identifisere potensielle feil og fremme beste praksis.
• Sømløs verktøyintegrasjon: Ta med eksterne verktøy og tjenester direkte inn i VS Code, som byggesystemer, testrammeverk og skyplattformer, og skap et enhetlig og integrert utviklingsmiljø.
• Bidrag til fellesskapet: Del dine utvidelser med det bredere JavaScript-fellesskapet, slik at andre utviklere kan dra nytte av arbeidet ditt og fremme samarbeid og innovasjon.

Grunnleggende om utvikling av VS Code-utvidelser

Før vi dykker ned i de tekniske detaljene, la oss dekke de essensielle konseptene og verktøyene som kreves for utvikling av VS Code-utvidelser.

Forutsetninger

• Node.js og npm (eller yarn): Node.js gir JavaScript-kjøremiljøet, og npm (Node Package Manager) eller yarn brukes til å administrere prosjektavhengigheter. Sørg for at du har de nyeste versjonene installert. Last ned fra nodejs.org.
• VS Code: Du trenger selvfølgelig VS Code. Last ned fra code.visualstudio.com.
• Yeoman og VS Code Extension Generator: Yeoman er et stillasverktøy som forenkler opprettelsen av nye prosjekter. VS Code Extension Generator gir en forhåndskonfigurert mal for VS Code-utvidelser. Installer dem globalt ved hjelp av npm:

              npm install -g yo generator-code
              
  
                
                  Copy
                
              
            

Utvidelsesmanifest (package.json)

package.json-filen er hjertet i utvidelsen din. Den definerer utvidelsens metadata, avhengigheter og aktiveringshendelser. Viktige egenskaper inkluderer:

• name: Den unike identifikatoren for utvidelsen din.
• displayName: Det menneskeleselige navnet som vises i VS Code-markedsplassen og utvidelseslisten.
• description: En kort beskrivelse av utvidelsens formål.
• version: Utvidelsens versjonsnummer.
• publisher: Din utgiver-ID (nødvendig for å publisere til VS Code-markedsplassen).
• engines.vscode: Minimumsversjonen av VS Code som kreves av utvidelsen.
• activationEvents: En matrise med hendelser som utløser aktiveringen av utvidelsen din. Vanlige hendelser inkluderer onCommand:dinKommandoId, onLanguage:språkId, og * (aktiveres ved oppstart). Å bruke spesifikke aktiveringshendelser er avgjørende for ytelsen.
• main: Stien til hoved-JavaScript-filen som inneholder utvidelsens kode.
• contributes: Et objekt som definerer utvidelsens bidrag til VS Code, som kommandoer, menyer, innstillinger og visninger.
• dependencies: En liste over npm-pakker som utvidelsen din er avhengig av.
• devDependencies: En liste over npm-pakker som kreves for utvikling, som testrammeverk og byggeverktøy.

Eksempel på package.json-utdrag:

            {
  "name": "my-javascript-tools",
  "displayName": "Mine JavaScript-verktøy",
  "description": "En samling nyttige JavaScript-utviklingsverktøy.",
  "version": "0.0.1",
  "publisher": "my-publisher",
  "engines": {
    "vscode": "^1.70.0"
  },
  "activationEvents": [
    "onCommand:my-javascript-tools.formatCode",
    "onLanguage:javascript"
  ],
  "main": "./extension.js",
  "contributes": {
    "commands": [
      {
        "command": "my-javascript-tools.formatCode",
        "title": "Formater JavaScript-kode"
      }
    ]
  },
  "dependencies": {
    "prettier": "^2.7.0"
  },
  "devDependencies": {
    "@types/vscode": "^1.70.0",
    "typescript": "^4.7.0"
  }
}
            

              
                Copy
              
            
          

Utvidelses-API

VS Code Extension API gir et rikt sett med grensesnitt og funksjoner for å samhandle med redigeringsprogrammet, få tilgang til funksjonene og manipulere dets oppførsel. Gjør deg kjent med kjerne-API-konseptene, inkludert:

• vscode.commands: Registrer og utfør kommandoer.
• vscode.languages: Registrer språkfunksjoner, som kodefullføring, 'hovers' og diagnostikk.
• vscode.window: Samhandle med redigeringsvinduet, vis meldinger og be om brukerinput.
• vscode.workspace: Få tilgang til arbeidsområderelatert informasjon, som filer, mapper og innstillinger.
• vscode.debug: Utvid feilsøkingsmuligheter.
• vscode.scm: Integrer med kildekontrollsystemer.

Aktiveringshendelser

Aktiveringshendelser er avgjørende for å kontrollere når utvidelsen din lastes inn og aktiveres. Å bruke spesifikke aktiveringshendelser kan betydelig forbedre oppstartsytelsen til VS Code. Vanlige aktiveringshendelser inkluderer:

• onCommand:<kommandoId>: Aktiveres når en spesifikk kommando utføres.
• onLanguage:<språkId>: Aktiveres når en fil med et spesifikt språk åpnes.
• onFileSystem:<skjema>: Aktiveres når en fil med et spesifikt filsystemskjema åpnes (f.eks. file, git, ftp).
• onDebug: Aktiveres når feilsøkeren startes.
• onTest: Aktiveres når tester kjøres.
• onView:<visningsId>: Aktiveres når en spesifikk visning er synlig i sidefeltet.
• *: Aktiveres ved oppstart (bruk med måte, da det kan påvirke ytelsen).

Lag din første VS Code-utvidelse

La oss gå gjennom prosessen med å lage en enkel VS Code-utvidelse som formaterer JavaScript-kode ved hjelp av Prettier.

Sette opp stillaset for utvidelsen

1. Åpne en terminal og naviger til mappen der du vil opprette utvidelsen.
2. Kjør VS Code Extension Generator:

               yo code
               
   
                 
                   Copy
                 
               
             

3. Svar på spørsmålene:
   • Velg New JavaScript Extension.
   • Skriv inn navnet på utvidelsen (f.eks. javascript-formatter).
   • Skriv inn identifikatoren for utvidelsen (f.eks. javascript-formatter).
   • Skriv inn en beskrivelse (f.eks. Formatterer JavaScript-kode ved hjelp av Prettier.).
   • Velg om du vil aktivere TypeScript (i dette eksempelet bruker vi JavaScript, men TypeScript anbefales sterkt for større prosjekter).
   • Velg om du vil initialisere et Git-repository.

Installere Prettier

Installer Prettier som en avhengighet for utvidelsen din:

            cd javascript-formatter
npm install prettier --save
            

              
                Copy
              
            
          

Implementere formateringslogikken

Åpne extension.js-filen. Denne filen inneholder kjerne-logikken til utvidelsen din. Erstatt den eksisterende koden med følgende:

            const vscode = require('vscode');
const prettier = require('prettier');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Gratulerer, din utvidelse \"javascript-formatter\" er nå aktiv!');

	let disposable = vscode.commands.registerCommand('javascript-formatter.formatCode', async () => {
		const editor = vscode.window.activeTextEditor;
		if (!editor) {
			vscode.window.showInformationMessage('Ingen aktiv teksteditor.');
			return;
		}

		const document = editor.document;
		const text = document.getText();

		try {
			const formattedText = prettier.format(text, {
				parser: 'babel',
				tabWidth: 2,
				semi: true,
				singleQuote: true,
				railingComma: 'es5',
				bracketSpacing: true,
				arrowParens: 'always',
				printWidth: 80
			});

			editor.edit(editBuilder => {
				editBuilder.replace(new vscode.Range(
					document.positionAt(0),
					document.positionAt(text.length)
				), formattedText);
			});
		} catch (error) {
			vscode.window.showErrorMessage(`Feil ved formatering av kode: ${error.message}`);
		}
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

            

              
                Copy
              
            
          

Oppdatere package.json

Endre package.json-filen for å registrere kommandoen og spesifisere aktiveringshendelsen. Legg til følgende i contributes-seksjonen:

            "contributes": {
  "commands": [
    {
      "command": "javascript-formatter.formatCode",
      "title": "Formater JavaScript-kode"
    }
  ]
},
            

              
                Copy
              
            
          

Og oppdater activationEvents-seksjonen:

            "activationEvents": [
  "onCommand:javascript-formatter.formatCode",
  "onLanguage:javascript"
],
            

              
                Copy
              
            
          

Teste utvidelsen

1. Trykk F5 for å starte utvidelsen i et nytt VS Code-vindu (Extension Development Host).
2. Åpne en JavaScript-fil i Extension Development Host.
3. Trykk Ctrl+Shift+P (eller Cmd+Shift+P på macOS) for å åpne kommandopaletten.
4. Skriv Formater JavaScript-kode og velg kommandoen.
5. JavaScript-koden i den aktive editoren skal nå formateres ved hjelp av Prettier.

Avanserte teknikker for utvikling av VS Code-utvidelser

Når du har mestret det grunnleggende, kan du utforske mer avanserte teknikker for å lage sofistikerte og kraftige VS Code-utvidelser.

Language Server Protocol (LSP)

Language Server Protocol (LSP) definerer en standardisert måte for språkservere å kommunisere med IDE-er. Ved å bruke LSP kan du tilby avanserte språkfunksjoner, som:

• Kodefullføring (IntelliSense): Foreslå relevante kodefullføringer basert på gjeldende kontekst.
• Gå til definisjon: Naviger til definisjonen av et symbol.
• Finn alle referanser: Finn alle forekomster av et symbol i arbeidsområdet.
• Gi nytt navn til symbol: Gi et symbol nytt navn og oppdater alle referanser.
• Kodediagnostikk (linting og feilkontroll): Identifiser potensielle feil og gi forslag til forbedringer.

Biblioteker som vscode-languageserver forenkler utviklingen av LSP-baserte utvidelser.

Støtte for feilsøking

VS Code gir et kraftig feilsøkings-API som lar deg utvide feilsøkingsmulighetene. Du kan:

• Lage tilpassede feilsøkingsadaptere: Støtte feilsøking av egendefinerte språk eller kjøremiljøer.
• Bidra med feilsøkingskonfigurasjoner: Tilby forhåndskonfigurerte feilsøkingskonfigurasjoner for spesifikke prosjekttyper.
• Legge til egendefinerte feilsøkingsvisninger: Vis feilsøkingsinformasjon i egendefinerte visninger.

Arbeide med Webviews

Webviews lar deg bygge inn nettbaserte brukergrensesnitt i VS Code. Dette er nyttig for å lage komplekse konfigurasjonspaneler, interaktive dokumentasjonsvisere eller visualiseringer. Du kan bruke HTML, CSS og JavaScript for å bygge brukergrensesnittet og kommunisere med utvidelsens backend ved hjelp av meldingsutveksling.

Innstillinger og konfigurasjon

Tillat brukere å tilpasse utvidelsens oppførsel gjennom innstillinger. Definer innstillinger i contributes.configuration-seksjonen i package.json-filen. Få tilgang til innstillinger ved hjelp av vscode.workspace.getConfiguration()-API-et.

Teste utvidelsen din

Grundig testing av utvidelsen din er avgjørende for å sikre dens kvalitet og pålitelighet. Bruk testrammeverk som Mocha og Chai til å skrive enhetstester og integrasjonstester. VS Code gir innebygd støtte for å kjøre tester i redigeringsprogrammet.

Beste praksis for utvikling av VS Code-utvidelser

Å følge disse beste praksisene vil hjelpe deg med å lage høykvalitets, vedlikeholdbare og brukervennlige VS Code-utvidelser:

• Bruk TypeScript: TypeScript gir statisk typing, som hjelper til med å fange feil tidlig og forbedrer vedlikeholdbarheten til koden.
• Bruk asynkron programmering: Unngå å blokkere UI-tråden ved å bruke asynkrone programmeringsteknikker, som async/await.
• Håndter feil på en elegant måte: Implementer riktig feilhåndtering for å forhindre krasj og gi informative feilmeldinger til brukeren.
• Dokumenter koden din: Skriv klar og konsis dokumentasjon for å hjelpe andre utviklere med å forstå og bruke utvidelsen din.
• Følg VS Code sine retningslinjer for utvidelser: Følg VS Code sine retningslinjer for utvidelser for å sikre at utvidelsen din oppfører seg bra og integreres sømløst med redigeringsprogrammet. Disse retningslinjene dekker emner som ytelse, sikkerhet og brukeropplevelse.
• Bruk semantisk versjonering: Følg prinsippene for semantisk versjonering (SemVer) når du utgir nye versjoner av utvidelsen din.
• Hold utvidelsen din oppdatert: Oppdater utvidelsen din jevnlig for å inkludere nye funksjoner, fikse feil og adressere sikkerhetssårbarheter.
• Internasjonalisering (i18n) og lokalisering (l10n): Vurder det globale publikummet til VS Code og design utvidelsen din med i18n/l10n i tankene. Dette innebærer å eksternalisere strenger og tilby oversettelser for forskjellige språk.
• Tilgjengelighet: Sørg for at utvidelsen din er tilgjengelig for brukere med nedsatt funksjonsevne. Følg retningslinjer for tilgjengelighet når du designer brukergrensesnittet ditt og vurder å bruke hjelpeteknologier for testing.

Publisere utvidelsen din

Når du er fornøyd med utvidelsen din, kan du publisere den til VS Code Marketplace, og gjøre den tilgjengelig for millioner av utviklere over hele verden.

1. Opprett en Azure DevOps-konto: Du trenger en Azure DevOps-konto for å administrere utvidelsene dine.
2. Installer vsce-verktøyet: VS Code Extension Manager (vsce) er et kommandolinjeverktøy for å pakke og publisere utvidelser.

               npm install -g vsce
               
   
                 
                   Copy
                 
               
             

3. Pakk utvidelsen din:

               vsce package
               
   
                 
                   Copy
                 
               
             

4. Publiser utvidelsen din:

               vsce publish
               
   
                 
                   Copy
                 
               
             

Følg instruksjonene på nettstedet til VS Code Marketplace for mer detaljert informasjon om publisering av utvidelsen din.

Eksempler fra den virkelige verden på JavaScript VS Code-utvidelser

Her er noen eksempler på populære JavaScript VS Code-utvidelser som demonstrerer kraften i verktøyintegrasjon:

• ESLint: Integrerer ESLint-linteren i VS Code, og gir sanntids kodeanalyse og fremheving av potensielle feil.
• Prettier: Formaterer automatisk JavaScript-kode i henhold til en konsistent stil.
• JavaScript (ES6) code snippets: Gir en samling nyttige kodebiter (snippets) for JavaScript-utvikling.
• Debugger for Chrome: Lar deg feilsøke JavaScript-kode som kjører i Chrome direkte fra VS Code.
• npm Intellisense: Autoutfyller npm-moduler i import-setninger.

Disse utvidelsene viser hvordan VS Code kan tilpasses og utvides for å skape et mer effektivt og produktivt utviklingsmiljø.

Konklusjon

Utvikling av VS Code-utvidelser er en kraftig måte å forbedre din JavaScript-utviklingsarbeidsflyt på, integrere eksterne verktøy og bidra til det bredere JavaScript-fellesskapet. Ved å mestre det grunnleggende i Extension API, forstå avanserte teknikker og følge beste praksis, kan du lage virkningsfulle utvidelser som løser reelle problemer og forbedrer livene til utviklere over hele verden. Omfavn kraften i utvidbarhet og lås opp det fulle potensialet til VS Code!